<script setup lang="ts">
import { reactive, ref } from 'vue';
import { postAction } from '@/service/request/action';
import { updatePassApi } from '@/service/path/admin';
import { Md5 } from 'ts-md5';
import { StatusMessage } from '@/enum';

const formRef = ref();
const state = reactive({
  isShowDialog: false,
  loading: false,
  ruleForm: {
    id: '',
    oldPassword: '',
    newPassword: '',
    confirmPass: ''
  },
  rules: {
    oldPassword: [
      { required: true, message: '请输入旧密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    newPassword: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    confirmPass: [
      { required: true, message: '请再次输入新密码', trigger: 'blur' },
      { validator: (rule, value, callback) => {
          if (value !== state.ruleForm.newPassword) {
            callback(new Error('两次输入密码不一致'))
          } else {
            callback()
          }
        }, trigger: 'blur' }
    ]
  }
});
const openDialog = (id: string) => {
  state.isShowDialog = true;
  state.ruleForm.id = id;
  state.ruleForm.oldPassword = '';
  state.ruleForm.newPassword = '';
  state.ruleForm.confirmPass = '';
};
const closeDialog = () => {
  state.isShowDialog = false;
};
const clickConfirm = () => {
  formRef.value.validate(err => {
    if (!err) {
      state.loading = true;
      postAction(updatePassApi, {
        id: state.ruleForm.id,
        oldPassword: Md5.hashStr(state.ruleForm.oldPassword),
        newPassword: Md5.hashStr(state.ruleForm.newPassword)
      }).then(res => {
        state.loading = false;
        if (!res.error) {
          window.$message?.success(StatusMessage.SUCCESS);
          closeDialog();
        }
      });
    }
  });
}
defineExpose({
  openDialog
});
</script>

<template>
  <n-modal v-model:show="state.isShowDialog" preset="dialog" title="修改密码"
           style="width: 600px" :show-icon="false" :close-on-esc="false" :mask-closable="false">
    <n-form ref="formRef" :model="state.ruleForm" :rules="state.rules" label-placement="left" label-width="100" require-mark-placement="left">
      <n-grid responsive="screen" item-responsive>
        <n-form-item-gi span="24" label="旧密码" path="oldPassword">
          <n-input v-model:value="state.ruleForm.oldPassword" type="password" placeholder="请输入旧密码" show-password-on="click" />
        </n-form-item-gi>
        <n-form-item-gi span="24" label="新密码" path="newPassword">
          <n-input v-model:value="state.ruleForm.newPassword" type="password" placeholder="请输入新密码" show-password-on="click" />
        </n-form-item-gi>
        <n-form-item-gi span="24" label="确认密码" path="confirmPass">
          <n-input v-model:value="state.ruleForm.confirmPass" type="password" placeholder="请再次输入新密码" show-password-on="click" />
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <template #action>
      <n-space justify="end">
        <n-button @click="closeDialog">取消</n-button>
        <n-button type="primary" @click="clickConfirm" :loading="state.loading">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<style scoped>

</style>
